<!--
 * @Author: wjc
 * @Date: 2025-10-28 17:48:38
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-29 16:56:23
 * @Description: 
-->
<template>
  <el-cascader
    :options="options"
    :placeholder="placeholder"
    :props="{ expandTrigger: 'hover', checkStrictly: strictly, multiple }"
    :size="size"
    :show-all-levels="showAllLevels"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="true"
    :disabled="disabled"
    :max-collapse-tags="maxCollapseTags"
    clearable
    filterable
    class="w-full"
    @change="handleChange"
    @remove-tag="removeTag"
  >
    <template #default="{ data }">
      <span>{{ data.label }}</span>
      <span v-if="data.count" class="color-color-disabled">({{ data.count }})</span>
    </template>
  </el-cascader>
</template>

<script setup lang="ts">
  import type { CascaderValue } from 'element-plus'

  defineOptions({
    name: 'MCascader',
  })

  const props = withDefaults(
    defineProps<{
      array?: boolean
      collapseTags?: boolean
      disabled?: boolean
      field: string
      maxCollapseTags?: number
      multiple?: boolean
      options?: any[]
      placeholder?: string
      showAllLevels?: boolean
      size?: string
      strictly?: boolean
    }>(),
    {
      placeholder: '请选择',
      options: () => [],
      disabled: false,
      strictly: false,
      multiple: false, // 后端指定是否多选
      array: false, // 后端指定是否返回值为数组
      showAllLevels: true,
      collapseTags: true,
      maxCollapseTags: 3,
      size: 'default',
    }
  )

  console.log('MCascader setup:', props)

  // const emits = defineEmits<{
  //   (e: 'update:modelValue', data: any): void
  // }>()

  const handleChange = (values: CascaderValue | null | undefined) => {
    console.log('handleChange', values)
    // emits('update:modelValue', values)
  }

  const removeTag = (values: CascaderValue) => {
    console.log('removeTags', values)
  }
</script>
